<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="layout">
<div layout:fragment="body">
 	<div class="l-layout" id="inner-layout" style="margin: 12px 0px 0px 12px;">
        <div position="left">
	        <div class="l-layout-header">渠道列表</div>
	        <div class="l-layout-content" id="treeDiv" style="overflow: auto">
	        	<ul id="channelTree"></ul>
	        </div>
        </div>
        <div position="center">
	        <div class="l-layout-header">
	        	用户列表
	        	&nbsp;<span id="selectNames" style="color:slategray;"></span>
	        </div>
			<div id="searchformDiv">
			   	<form id='searchform' class="l-search-form">
					<input type="text" class="l-text" name="search_LIKE_name" id="search_LIKE_name" th:placeholder="#{channel.name}"/>
					<input type="hidden" name="search_LLK_no" id="search_LLK_no" th:value="${no}"/>
					<input type="reset" class="l-reset" th:value="#{reset} " />
					<input type="button" class="l-search" th:value="#{search}" onclick="f_search();" /> 
				</form>
			</div>
			<div id="maingrid"></div>
	    </div>
	</div>
</div>

<!-- page specific plugin scripts -->
<script type="text/javascript" layout:fragment="script" th:inline="text">/*<![CDATA[*/
	var channelTree;
   	var maingrid;
   	var selectIds = new Array();
   	var selectNames = new Array();
	$(function (){
		$("#inner-layout").ligerLayout({ leftWidth: 200, allowLeftCollapse:false});
		//生成树
        channelTree = $("#channelTree").ligerTree({
        	 url:'/channel/treeList?isParent=true',
	         idFieldName :'id',
	         textFieldName : 'name',
	         parentIDFieldName :'pid',
	         ajaxType : 'GET',
	         checkbox: false,
	         nodeWidth:160,
	         delay:2,
	         onSelect: function(node){
                 $("#search_LLK_no").val(node.data.no);
	             f_search();
	         },
	         onCancelselect: function(node){
                 $("#search_LLK_no").val("");
	         }
         });

        //列表信息
		maingrid = newNoPageGrid("maingrid", {
			columns : [ {
				display : '[[#{channel.name}]]',
				name : 'name',
				width : 100
			}, {
				display : '[[#{channel.mobile}]]',
				name : 'mobile',
				width : 120
			}],
			url : '/loanRequest/user/list',
			method : 'get',
			checkbox : true,
            delayLoad : true,
			onSelectRow : function (rowdata, rowid, rowobj){
				//多选情况下，拼接多个
				if([[${isMultiSelect}]]){
					if($.inArray(rowdata["userId"], selectIds) < 0){
						selectIds.push(rowdata["userId"]);
					}
					if(selectNames.length < 5){
						if($.inArray(rowdata["name"], selectNames) < 0){
							selectNames.push(rowdata["name"]);
						}
					}
				}
				//单选只赋值最后一个
				else{
					selectIds.length = 0;
					selectIds.push(rowdata["userId"]);
					selectNames.length = 0;
					selectNames.push(rowdata["name"]);
				}
				fillShowSpan();
			},
			onUnSelectRow : function(rowdata, rowid, rowobj){
				if(selectIds.length > 0){
					$.each(selectIds,function(){
						var index = this.indexOf(rowdata["userId"]);
						if(index <= 0){
							selectIds.splice(index, 1);
							return false;
						}
					});
				}
				if(selectNames.length > 0){
					$.each(selectNames,function(){
						var index = this.indexOf(rowdata["name"]);
						if(index <= 0){
							selectNames.splice(index, 1);
							return false;
						}
					});
				}
				fillShowSpan();
			}
		});

        var gridHeight = document.documentElement.clientHeight -  $("#searchform").height() - 69;
		maingrid.setHeight(gridHeight);
		$("#treeDiv").css("height", gridHeight + 41);

        //默认选中本部门
        $("#search_LLK_no").val('[[${currentChannelNo}]]');
        f_search();
        $("#search_LLK_no").val("");
	});

	function fillShowSpan(){
		if(selectNames.length > 0){
			$("#selectNames").html("已选择:" + selectNames.join(",").toString() + "...");
		}else{
			$("#selectNames").html("");
		}
	}
	
	function f_search() {
		loadGridData(maingrid, "searchform");
	}

	function f_select() {
		var resultData = {};
		resultData.selectIds = selectIds;
		resultData.selectNames = selectNames;
		return resultData;
	}
/*]]>*/</script>
</html>